<template>
	<h3>子组件</h3>
	<!-- 直接使用属性名 -->
	<div>父组件传递的数据num:{{ num }}</div>
	<!-- <input type="text" v-model.lazy.number="prop.num"/> -->
	<!-- $emit('event1')触发这个组件对应的标签上event1这个事件 -->
	<button @click="$emit('event2')">测试</button><br/>
	<button @click="$emit('changeNumEvent')">修改num为1000</button>
	<!-- 对象访问属性 -->
	<div>父组件传递的数据str:{{ prop.str }}</div>
	<div>父组件传递的数据aaa:{{ prop.aaa }}</div>
</template>

<script setup>
// 在子组件中声明可以接收的数据
// num：自定义组件属性，3个自定属性是只读的，只能接收父组件传递的数据，自己不能改
const prop = defineProps(['num', 'str', 'aaa'])
// JS中操作自定义属性，需要使用对象.属性
console.log('父组件中传递的str:' + prop.str)
// 声明自定义事件
const emit = defineEmits(['event1', 'event2', 'changeNumEvent'])

</script>

<style scoped>
	
</style>